<template>
  <div class="home-swiper-container">
    <nut-swiper :pagination-visible="true" auto-play="5000">
      <nut-swiper-item>
        <Image class="img" mode="aspectFill" :src="banner1" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>
<script lang="ts" setup>
import banner1 from "../../assets/images/banner/1.png";
</script>
<style lang="scss">
.home-swiper-container {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
  .nut-swiper {
    border-radius: 0.5rem;
    overflow: hidden;
    .nut-swiper-pagination {
      .h5-i {
        background-color: #f3f3f4 !important;
        opacity: 0.5;
      }
      .h5-i.active {
        background-image: linear-gradient(100deg, #ff6034, #ee0a24) !important;
        opacity: 0.9;
      }
    }
  }
  .nut-swiper-item {
    line-height: 5rem;
    .img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
